
{{ render "layout/header.html" . }}

<style>
    .jz-item{background: linear-gradient(135deg, #c850c0, #4158d0);padding: 28px;
        color: white;min-width: 250px;
        border-radius: 8px;}
    .jz-item .js-item-title{margin-bottom: 20px;}
    .jz-item .js-item-content{font-size: 15px;display: flex;flex-direction: column;
        flex-wrap: wrap;line-height: 35px;}
    
    .my-small-3 > div{margin: 0px;padding: 10px;}
    .my-small-3-title{text-align: center;margin: 5px 0;}
    .my-small-3-subtitle{text-align: center;font-size: 13px;color: grey;}

</style>

<body>
    <div>

        {{ render "layout/nav-header.html" . }}
        <!-- <img src="/static/image/small1.png" style="max-width: 100%;min-height: 72px;object-fit: cover;" /> -->
        <div class="d-block banner-img" style="
            background-image: url('./static/image/portal-banner-bg2.png');
            background-size: cover;
            background-position: center;
            height: 450px;
        "></div>

        <section class="container">
            <section style="
                width: 100%;
                margin: 20px auto;
                margin-top: -50px;
                padding: 10px;
                border-radius: 8px;
                background-color: white;
            ">
            <h2 style="text-align: center;margin: 30px 0 50px 0;">小程序商城 · 优势</h2>
            <div style="
                display: flex;
                flex-direction: row;
                justify-content: space-evenly;
                flex-wrap: wrap;
                gap: 10px;
                margin: 30px 0;
            ">
                <div class="jz-item">
                    <h4 class="js-item-title">助力业务营销</h4>
                    <div class="js-item-content">
                        <span>方便浏览公司产品</span>
                        <span>方便客户下单、增加粘性</span>
                        <span>移动支付方便</span>
                        <span>统一管理发货</span>
                        <span>增加私域客户信任</span>
                    </div>
                </div>
                <div class="jz-item">
                    <h4 class="js-item-title">强大的后台系统</h4>
                    <div class="js-item-content">
                        <span>分销</span>
                        <span>会员等级</span>
                        <span>支持推荐算法</span>
                        <span>等等</span>
                    </div>
                </div>
                <div class="jz-item">
                    <h4 class="js-item-title">美观的商城界面</h4>
                    <div class="js-item-content">
                        <span>美观、清晰</span>
                        <span>客户操作便捷</span>
                    </div>
                </div>
                <div class="jz-item">
                    <h4 class="js-item-title">可靠的服务</h4>
                    <div class="js-item-content">
                        <span>系统升级、运维</span>
                        <span>新功能开发</span>
                        <span>7x12h售后服务</span>
                    </div>
                </div>
            </div>
            </section>

            <section class="container my-small" style="
                background-color: white;border-radius: 6px;padding: 20px 0;
                margin-bottom: 20px;
            ">
                <h2 style="text-align: center;margin: 50px 0;">小程序 · 优势特点</h2>
                <div class="row gap-0 my-small-3">
                    <div class="col-4 col-xs-4 col-sm-3 col-md-3 col-lg-3">
                        <div class="my-small-3-title"><img src="/static/image/small2.png" width="80" alt=""/></div>
                        <div class="my-small-3-title">系统框架优</div>
                        <div class="my-small-3-subtitle">信息实时改变，即用即走无需下载安装</div>
                    </div>
                    <div class="col-4 col-xs-4 col-sm-3 col-md-3 col-lg-3">
                        <div class="my-small-3-title"><img src="/static/image/small3.png" width="80" alt=""/></div>
                        <div class="my-small-3-title">系统框架优</div>
                        <div class="my-small-3-subtitle">信息实时改变，即用即走无需下载安装</div>
                    </div>
                    <div class="col-4 col-xs-4 col-sm-3 col-md-3 col-lg-3">
                        <div class="my-small-3-title"><img src="/static/image/small4.png" width="80" alt=""/></div>
                        <div class="my-small-3-title">对话分享</div>
                        <div class="my-small-3-subtitle">分享好友分享到群为你引流</div>
                    </div>
                    <div class="col-4 col-xs-4 col-sm-3 col-md-3 col-lg-3">
                        <div class="my-small-3-title"><img src="/static/image/small5.png" width="80" alt=""/></div>
                        <div class="my-small-3-title">探索查找</div>
                        <div class="my-small-3-subtitle">微信搜索即可找到</div>
                    </div>
                    <div class="col-4 col-xs-4 col-sm-3 col-md-3 col-lg-3">
                        <div class="my-small-3-title"><img src="/static/image/small6.png" width="80" alt=""/></div>
                        <div class="my-small-3-title">公众号关联</div>
                        <div class="my-small-3-subtitle">一键关联微信公众号</div>
                    </div>
                    <div class="col-4 col-xs-4 col-sm-3 col-md-3 col-lg-3">
                        <div class="my-small-3-title"><img src="/static/image/small7.png" width="80" alt=""/></div>
                        <div class="my-small-3-title">节省APP开发成本</div>
                        <div class="my-small-3-subtitle">对企业而言可节省下APP开发时间和成本</div>
                    </div>
                    <div class="col-4 col-xs-4 col-sm-3 col-md-3 col-lg-3">
                        <div class="my-small-3-title"><img src="/static/image/small8.png" width="80" alt=""/></div>
                        <div class="my-small-3-title">线下扫码</div>
                        <div class="my-small-3-subtitle">线下扫码使用提供线下提示功能</div>
                    </div>
                    <div class="col-4 col-xs-4 col-sm-3 col-md-3 col-lg-3">
                        <div class="my-small-3-title"><img src="/static/image/small9.png" width="80" alt=""/></div>
                        <div class="my-small-3-title">功能齐全</div>
                        <div class="my-small-3-subtitle">分销、会员等级、优惠券，定制开发</div>
                    </div>
                    <div class="col-4 col-xs-4 col-sm-3 col-md-3 col-lg-3">
                        <div class="my-small-3-title"><img src="/static/image/small10.png" width="80" alt=""/></div>
                        <div class="my-small-3-title">消息通知</div>
                        <div class="my-small-3-subtitle">可发送消息给服务过的用户</div>
                    </div>
                    <div class="col-4 col-xs-4 col-sm-3 col-md-3 col-lg-3">
                        <div class="my-small-3-title"><img src="/static/image/small11.png" width="80" alt=""/></div>
                        <div class="my-small-3-title">历史列表</div>
                        <div class="my-small-3-subtitle">使用过的小程序会被放入列表，方便下次使用</div>
                    </div>
                </div>
            </section>
        </section>

        {{ render "layout/footer.html" . }}

    </div>

    {{ render "layout/back-to-top.html" . }}
    {{ render "layout/fixed-footer.html" . }}


    {{ render "layout/js.html" . }}
</body>
</html>